
<template>
    <div class="map-measuring">
        <div class="measuring-setting-content">
            <div class="measuring-type-box box-item">
                <ul>
                    <li v-for="(item,index) in measurementAnalysisData[0].content" @click="handleIcon(item,index)" :title="item.label">
                        <img :src="activeIcon === item.icon ? getAssetsFile(`cesium/measuring/active/${item.icon}.png`) : getAssetsFile(`cesium/measuring/${item.icon}.png`)" alt="" srcset="">
                        <span  :class="activeIcon === item.icon ? 'active-text' : ''">{{ item.label }}</span>
                    </li>
                </ul>
            </div>
            <div class="analysis-type-box box-item">
                <h5>{{ measurementAnalysisData[1].lable }}</h5>
                <ul>
                    <li v-for="(item,index) in measurementAnalysisData[1].content" @click="handleIcon(item,index)" :title="item.label">
                        <img :src="activeIcon === item.icon ? getAssetsFile(`cesium/measuring/active/${item.icon}.png`) : getAssetsFile(`cesium/measuring/${item.icon}.png`)" alt="" srcset="">
                        <span :class="activeIcon === item.icon ? 'active-text' : ''">{{ item.label }}</span>
                    </li>
                </ul>
            </div>
            <div class="clear-box">
                <el-button class="clear-btn">清除测量分析结果</el-button>
            </div>
        </div>
    </div>
  </template>
  
  <script setup lang="ts">
import * as Cesium from 'cesium'
import { useCesiumGlobalStore } from "@/store/modules/cesiun-global"
import { getAssetsFile } from "@/utils/index"
import { onMounted, onUnmounted, ref } from "vue";
import measurementAnalysisData from './setting'
import MeasureTool from '@/cesium/measuring'
import alalystTool from '@/cesium/measuring/analyst.ts'
  const cesiumGlobalStore = useCesiumGlobalStore()
  let activeIcon = ref('')

onMounted(() => {

})
onUnmounted(() => {
    onClear()
})
const onClear = () => {
  measure._drawLayer.entities.removeAll();
};

const measure = new MeasureTool(cesiumGlobalStore.viewerInstance,{});
const alalyst = new alalystTool(cesiumGlobalStore.viewerInstance,{})
const handleIcon = (item,index) => {
    activeIcon.value = item.icon
    if(item.icon === 'kjjl'){
        // drawLine()
        measure.drawLineMeasureGraphics({
            clampToGround: true,
            callback: (e) => {
            activeIcon.value = ''
            },
        });
    }else if(item.icon === 'sjcl'){
        console.log('i',item.icon)
        measure.drawTrianglesMeasureGraphics({
            callback: () => { 
                activeIcon.value = ''
            },
        });
    }else if(item.icon === 'tymj'){
        measure.drawAreaMeasureGraphics({
            callback: () => { 
                activeIcon.value = ''
            },
        })
    }else if(item.icon === 'dbjl'){
        measure.tieditest({
            callback: () => {
                activeIcon.value = ''
            },
        })
    }else if(item.icon === 'tyjl'){
        measure.tieditest({
            callback: () => {
                activeIcon.value = ''
            },
        })
    }else if(item.icon === 'dgx'){
        alalyst.elevationLine()
    }
}


  </script>
  
  <style scoped lang="less">
.map-measuring{
    .measuring-setting-content{
        .clear-box{
            text-align: center;
            margin-top: 20px;
        }
        .clear-btn{
            margin: 0 auto;
        }
        ul{
            padding: 0;
            margin: 0;
            display: flex;
            flex-wrap: wrap;
            width: 260px;
        }
        li{
            cursor: pointer;
            margin: 10px;
            // border-bottom: 1px solid #eee;
            .measuring-title{
                color: #999;
                font-size: 14px;
                line-height: 32px;
            }
            list-style:none;
            width: 60px;
            text-align: center;
            img{
                margin-left: 10px;
                width: 40px;
                display: block;
            }
            span{
                margin-top: 3px;
                display: inline-block;
                font-size: 12px;
                max-width:100%;
                overflow:hidden;/*内容超出后隐藏*/
                text-overflow:ellipsis;/*超出内容显示为省略号*/
                white-space:nowrap;/*文本不进行换行*/
            }
        }
        li:hover span{
            color: #3b7cff;
        }
        .analysis-type-box{
            border-top: 1px solid #eee;
            h5{
                margin: 15px 0;
            }

        }
        .active-text{
                color: #3b7cff;;
            }
    }
}
  </style>
  